import React from 'react';
import { SafeAreaView,StyleSheet } from 'react-native';
import { Divider, Icon, Layout, Text, TopNavigation, TopNavigationAction } from '@ui-kitten/components';
import DeviceRender from '../components/DeviceList'
import { useSelector, useDispatch } from 'react-redux';
import {  setCurrentConnectedDevice } from '../store'

const BackIcon = (props) => (
  <Icon {...props} name='arrow-back' />
);

export const ConnectedScreen = ( props) => {
  const {navigation} = props
  const connectedDevices = useSelector((state) => state.connectedDevices)
  const dispatch = useDispatch()

  const navigateBack = () => {
    navigation.goBack();
  };

  onPressDevice = (item) => {
    dispatch(setCurrentConnectedDevice(device))
    navigation.push('Action')
  }

  const BackAction = () => (
    <TopNavigationAction icon={BackIcon} onPress={navigateBack} />
  );

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <TopNavigation title='已连接设备' alignment='center' accessoryLeft={BackAction} />
      <Divider />
      <Layout>
        <DeviceRender data={connectedDevices} onPress={onPressDevice} txtRight="查看"/>
      </Layout>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})